<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Quick Doc Service Home Page">
    <meta name="author" content="Michael Chen">
    <meta name="keyword" content="Quick Doc Service">
    <link rel="shortcut icon" href="images/favicon.png">
    <title th:text="${title}"></title>

    <!-- Icons -->
    <link rel="stylesheet" type="text/css" href="css/fontawesome-all.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/simple-line-icons.css"/>
    <!--layui and necessary plugins-->
    <link rel="stylesheet" type="text/css" href="lib/layui/css/layui.css" media="all"/>
    <!-- Main styles for this application -->
    <link rel="stylesheet" type="text/css" href="css/style.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/mxleader-style.css"/>
</head>

<body class="app header-fixed sidebar-fixed aside-menu-fixed aside-menu-hidden">
<header class="app-header navbar">
    <button class="navbar-toggler mobile-sidebar-toggler d-lg-none mr-auto" type="button">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#"></a>
    <button class="navbar-toggler sidebar-toggler d-md-down-none" type="button">
        <span class="navbar-toggler-icon"></span>
    </button>

    <ul class="nav navbar-nav d-md-down-none">
        <li class="nav-item px-3" th:if="${session.ActiveUser.isAdmin()}">
            <a class="nav-link" href="disk/space">空间管理</a>
        </li>
        <li class="nav-item px-3" th:if="${session.ActiveUser.isAdmin()}">
            <a class="nav-link" href="users">系统用户</a>
        </li>
        <li class="dropdown nav-item px-3" th:if="${session.ActiveUser.isAdmin()}">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                REST API 接口 <b class="caret"></b>
            </a>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenu">
                <a class="dropdown-item" href="swagger-ui.html">SWAGGER-UI</a>
                <a class="dropdown-item" href="doc.html">swagger-bootstrap-ui</a>
            </ul>
        </li>
    </ul>
    <ul class="nav navbar-nav ml-auto">
        <li class="nav-item dropdown">
            <a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
               aria-expanded="false">
                <img th:src="@{'file/preview/'+${session.ActiveUser.avatarId}}"
                     class="img-avatar" th:alt="${session.ActiveUser.email}">
            </a>
            <div class="dropdown-menu dropdown-menu-right">
                <div class="dropdown-header text-center">
                    <strong th:text="@{'当前用户：'+${session.ActiveUser.displayName}+'【'+${session.ActiveUser.title}+'】'}"></strong>
                </div>
                <a id="changePsMenu" class="dropdown-item" href="#" title="修改密码" lay-filter="change-password">
                    <i class="fas fa-wrench"></i> 修改密码</a>
                <div class="divider"></div>
                <a class="dropdown-item" href="#"><i class="fas fa-heart"></i> 我的收藏</a>
                <a class="dropdown-item" href="#"><i class="fas fa-file"></i> 我的文件</a>
                <div class="divider"></div>
                <a class="dropdown-item" href="/logout" target="_top">
                    <i class="fas fa-sign-out-alt"></i> 退出当前账号</a>
            </div>
        </li>
    </ul>
    <button class="navbar-toggler aside-menu-toggler" type="button">
        <span class="navbar-toggler-icon"></span>
    </button>

</header>

<div class="app-body">
    <div class="sidebar">
        <nav class="sidebar-nav">
            <ul class="nav">
                <li class="nav-title">
                    文件服务
                </li>
                <li class="nav-item nav-dropdown">
                    <a class="nav-link nav-dropdown-toggle" href="#">
                        <i class="fas fa-user-circle"></i> 个人空间
                    </a>
                    <ul class="nav-dropdown-items">
                        <li class="nav-item" th:each="private_disk : ${private_disk_menu}">
                            <a class="nav-link" th:href="@{'disk/'+${private_disk.id}}">
                                <i class="fas fa-hdd"></i><span th:text="${private_disk.name}"></span>
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="nav-item nav-dropdown">
                    <a class="nav-link nav-dropdown-toggle" href="#">
                        <i class="fab fa-gg-circle"></i> 共享空间
                    </a>
                    <ul class="nav-dropdown-items">
                        <li class="nav-item" th:each="group_disk : ${group_disk_menu}">
                            <a class="nav-link" th:href="@{'disk/'+${group_disk.id}}">
                                <i class="fas fa-hdd"></i><span th:text="${group_disk.name}"></span>
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="nav-title" th:if="${session.ActiveUser.isAdmin()} or ${session.ActiveUser.isManager()}">
                    系统设置
                </li>
                <li class="nav-item" th:if="${session.ActiveUser.isManager()}">
                    <a class="nav-link" href="disk/space1"><i class="fas fa-cogs"></i>空间管理</a>
                </li>
                <li class="nav-item" th:if="${session.ActiveUser.isAdmin()}">
                    <a class="nav-link" href="disk/space"><i class="fas fa-cogs"></i>空间管理</a>
                </li>
                <li class="nav-item" th:if="${session.ActiveUser.isAdmin()} or ${session.ActiveUser.isManager()}">
                    <a class="nav-link" href="users"><i class="fas fa-users"></i>系统用户</a>
                </li>
            </ul>
        </nav>
        <button class="sidebar-minimizer brand-minimizer" type="button"></button>
    </div>

    <!-- Main content -->
    <main class="main">
        <ol class="breadcrumb">
            <form class="breadcrumb-item form-inline" id="searchform"
                  onkeydown="if(event.keyCode==13){
                      setUpUrl('file/search?filename=' + $('#filename').val());
                      return false;
                  }">
                <div class="container">
                    <div class="layui-inline">
                        <input class="form-control" type="search" placeholder="文件名"
                               name="filename" id="filename" size="60">
                    </div>
                    <button type="reset" id="searchBtn" class="btn btn-outline-success"
                            lay-submit="" lay-filter="searchBtn"><i class="fas fa-search"></i> 搜索
                    </button>
                </div>
            </form>
            <li class="breadcrumb-menu d-md-down-none">
                <div class="btn-group" role="group" aria-label="Button group">
                    <a class="btn" href="./"><i class="fas fa-home"></i> &nbsp;返回首页</a>
                    <a class="btn" href="/logout" target="_top" title="退出当前账号"><i class="fas fa-sign-out-alt"></i></a>
                </div>
            </li>
        </ol>

        <div class="container-fluid">
            <div id="ui-view"></div>
        </div>
    </main>

    <aside class="aside-menu">

        <!-- Tab panes -->
        <div class="tab-content">
            <div class="tab-pane active" id="settings" role="tabpanel">
                <h6>设置</h6>

                <div class="aside-options">
                    <div class="clearfix mt-4">
                        <small><b>Option 1</b></small>
                        <label class="switch switch-text switch-pill switch-success switch-sm float-right">
                            <input type="checkbox" class="switch-input" checked>
                            <span class="switch-label" data-on="On" data-off="Off"></span>
                            <span class="switch-handle"></span>
                        </label>
                    </div>
                    <div>
                        <small class="text-muted">...............
                        </small>
                    </div>
                </div>

                <div class="aside-options">
                    <div class="clearfix mt-3">
                        <small><b>Option 2</b></small>
                        <label class="switch switch-text switch-pill switch-success switch-sm float-right">
                            <input type="checkbox" class="switch-input">
                            <span class="switch-label" data-on="On" data-off="Off"></span>
                            <span class="switch-handle"></span>
                        </label>
                    </div>
                    <div>
                        <small class="text-muted">Testing........
                        </small>
                    </div>
                </div>

                <hr>
                <h6>我的空间</h6>

                <div class="text-uppercase mb-1 mt-2">
                    <small><b>磁盘1</b></small>
                </div>
                <div class="progress progress-xs">
                    <div class="progress-bar bg-danger" role="progressbar" style="width: 95%" aria-valuenow="95"
                         aria-valuemin="0" aria-valuemax="100"></div>
                </div>
                <small class="text-muted">243GB/256GB</small>

                <div class="text-uppercase mb-1 mt-2">
                    <small><b>磁盘2</b></small>
                </div>
                <div class="progress progress-xs">
                    <div class="progress-bar bg-success" role="progressbar" style="width: 10%" aria-valuenow="10"
                         aria-valuemin="0" aria-valuemax="100"></div>
                </div>
                <small class="text-muted">25GB/256GB</small>
            </div>
        </div>
    </aside>

</div>

<footer class="app-footer">
    <span><a href="http://www.mxleader.cn">MXLEADER</a> &copy; 2018 GROUPS.</span>
    <span class="ml-auto">Powered by <a href="http://www.mxleader.cn">MXLEADER</a></span>
</footer>

<!-- Bootstrap and necessary plugins -->
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/pace.min.js"></script>
<script type="text/javascript" src="/lib/layui/layui.js"></script>

<!-- Plugins and scripts required by all views -->
<script src="js/Chart.min.js"></script>

<!-- CoreUI main scripts -->
<script src="js/app.js" th:inline="javascript"></script>

<script th:inline="javascript">
    layui.use(['layer', 'form'], function () {
        var form = layui.form
            , layer = layui.layer;

        form.on('submit(searchBtn)', function (data) {
            var filename = $("#filename").val();
            setUpUrl("file/search?filename=" + filename);
        });

        $('.dropdown-item').on('click', function () {
            switch ($(this).attr('lay-filter')) {
                case 'change-password': {
                    layer.open({
                        type: 2,
                        title: '修改密码',
                        area: ['360px', '280px'],
                        resize: false,
                        content: 'users/password',
                        zIndex: layer.zIndex,
                        success: function (layero) {
                            layer.setTop(layero);
                        }
                    });
                }
                    break;
            }
        });

    });
</script>

</body>
</html>